<template>
  <div class="roles">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加用户按钮 -->
    <el-button type="primary" plain @click="addRoles">添加用户</el-button>
    <!-- 添加用户对话框 -->
    <el-dialog title="添加用户" :visible.sync="addDialogFormVisible">
      <el-form :model="addForm">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="addForm.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="addForm.roleDesc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="conirmAdd">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 用户列表 -->
    <el-table :data="tableData" border style="width: 100%">
      <!-- 角色列表展开内容 -->
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-row v-for="(firstChildItem) in scope.row.children" :key="firstChildItem.id">
            <el-col :span="4">
              <el-tag closable @close="handleRoles(scope.row.id, firstChildItem.id, scope)">{{firstChildItem.authName}}</el-tag>
              <i class="el-icon-arrow-right" v-if="firstChildItem.authName.lenght>0"></i>
            </el-col>
            <el-col :span="20">
              <el-row
                v-for="(secondChildItem) in firstChildItem.children"
                :key="secondChildItem.id"
              >
                <el-col :span="4">
                  <el-tag type="warning" closable @close="handleRoles(scope.row.id, secondChildItem.id, scope)">{{secondChildItem.authName}}</el-tag>
                  <i class="el-icon-arrow-right" v-if="secondChildItem.authName.lenght>0"></i>
                </el-col>
                <el-col :span="20">
                  <el-tag
                    type="danger"
                    v-for="(thirdhCildItem) in secondChildItem.children"
                    :key="thirdhCildItem.id"
                    closable
                    @close="handleRoles(scope.row.id, thirdhCildItem.id, scope)"
                  >{{thirdhCildItem.authName}}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row v-if="scope.row.children.length<=0">
            <div>该角色没有分配角色，请前往分配</div>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="180"></el-table-column>
      <el-table-column prop="roleDesc" label="描述" width="180"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
          <el-button type="primary" icon="el-icon-share" @click="handleRoless(scope.row)"></el-button>
          <el-button type="primary" icon="el-icon-delete" @click="handleDetele(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 展开树形详情对话框 -->
    <el-dialog title="授权角色" :visible.sync="authorizationRole">
      <el-tree
        :data="data2"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        class="MessageBox"
        default-expand-all
        :default-checked-keys="selectedIds"
        ref="tree"
      ></el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="authorizationRole = false">取 消</el-button>
        <el-button type="primary" @click="handlePoseRole">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getRoleList,
  deleteRolePower,
  addUsers,
  getPowerList,
  postRoles
} from '@/api'
export default {
  data () {
    return {
      formLabelWidth: '90px',
      tableData: [],
      addDialogFormVisible: false, // 添加用户对话框显示与隐藏，默认false
      addForm: {
        roleName: '',
        roleDesc: ''
      },
      authorizationRole: false, // 展开树形对话框显示与隐藏

      data2: [],
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      selectedIds: [], // 默认显示的树形数据
      clickPower: {}
    }
  },
  created () {
    // 调用初始化表格
    this.initTable()
  },
  methods: {
    // 初始化表格
    initTable () {
      getRoleList().then(res => {
        // console.log(res)
        this.tableData = res.data.data
        console.log(this.tableData)
      })
    },
    handleRoles (roleid, rightid, scope) {
      deleteRolePower(roleid, rightid).then(res => {
        // console.log(res)
        if (res.data.meta.status === 200) {
          this.$message.success(res.data.meta.msg)
          scope.row.children = res.data.data
        } else {
          this.$message.error(res.data.meta.msg)
        }
      })
    },
    // 添加角色
    addRoles () {
      this.addDialogFormVisible = true
    },
    // 添加角色成功按钮
    conirmAdd () {
      addUsers(this.addForm).then(res => {
        console.log('确定')
        this.addForm = res.data.data
        this.initTable()
      })
    },
    // 展开树形详情
    handleRoless (row) {
      this.clickPower = row
      this.authorizationRole = true
      getPowerList('tree').then(res => {
        this.data2 = res.data.data
      })
      // 用过row.children拿到当前角色的所有权限，并把他的第三层数据权限的id取出来放进selectedIds数组中
      // 循环之前需要先将数据selectedids清空，不然点击时只会拿到上一次的数据
      this.selectedIds = []
      row.children.forEach(firstItem => {
        if (firstItem.children && firstItem.children.length > 0) {
          firstItem.children.forEach(secondItem => {
            if (secondItem.children && secondItem.children.length > 0) {
              secondItem.children.forEach(thirdItem => {
                this.selectedIds.push(thirdItem.id)
              })
            }
          })
        }
      })
    },
    // 授权角色确定按钮
    handlePoseRole () {
      let allCheckedIds = this.$refs.tree.getCheckedKeys()
      let halfCheckedIds = this.$refs.tree.getHalfCheckedKeys()
      let idList = [...allCheckedIds, ...halfCheckedIds]
      let idStr = idList.join(',')
      postRoles(this.clickPower.id, idStr).then(res => {
        if (res.data.meta.status === 200) {
          this.$message.success(res.data.meta.msg)
          this.authorizationRole = false
          this.initTable()
        } else {
          this.$message.error(res.data.meta.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .search-input {
    width: 300px;
    margin-right: 10px;
  }

  .el-button {
    padding: 12px 16px;
  }

  .el-table {
    margin-top: 10px;
  }

  .el-tag {
    margin: 5px 5px 5px;
    // padding: 0 3px;
  }

  .MessageBox {
    height: 300px;
    overflow: auto;
  }
</style>
